<template>
  <div>
    <h1>生成二维码</h1>
    <div class="qrcode-container">
      <qrcode-vue :value="qrCodeValue" :size="qrCodeSize" :level="errorCorrectionLevel" :image="image"
        :imageOptions="imageoption" class="qrcode" :background="white" :foreground="black"></qrcode-vue>
    </div>

    <van-button round block color="linear-gradient(to right, #ff6034, #ee0a24)" native-type="submit"
      @click="submit">点击生成
    </van-button>
    <div class="po">
      <input type="text" :value="'http://localhost:5173/#/business/register/?token=' + LoginUser.token
        " readonly ref="readonlyInput" class="readonly-input" />

      <button @click="copyToClipboard" class="copy">点击复制</button>
    </div>

  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from "vue";
import QrcodeVue from "qrcode-vue3";
const { proxy } = getCurrentInstance();
const LoginUser = reactive(proxy.$cookies.get("LoginUser"));
const image = ref("");
const imageoption = ref({
  hideBackgroundDots: true, // 隐藏图片背后有点
  imageSize: 0.5,
  margin: 5,
  crossOrigin: "anonymous", // anonymous | use-credentials
});
// console.log(LoginUser.avatar);
// try {
//   image.value = URL.createObjectURL(LoginUser.avatar);
// } catch (err) {
//   const fr = new FileReader(err);
//   fr.readAsDataURL(LoginUser.avatar);
//   fr.onload = ({ target }) => {
//     image.value = target.result;
//   };
// }
// image.value= URL.createObjectURL(LoginUser.avatar);

const logosrc = ref(LoginUser.avatar);
const qrCodeValue = ref(
  "http://localhost:5173/#/business/register/?token=" + LoginUser.token
);

const qrCodeSize = ref(150);
const errorCorrectionLevel = ref("L"); // 可以是 'L', 'M', 'Q', 'H'
const submit = async () => {
  qrCodeValue.value =
    "http://localhost:5173/#/business/register/?token=" + LoginUser.token;
  let result = await Api.Poster({
    busid: LoginUser.id,
    poster: qrCodeValue.value,
    token: LoginUser.token,
  });
  console.log(result);
};
// 复制到剪贴板的函数
const copyToClipboard = () => {
  const input = document.querySelector(".readonly-input");
  input.select();
  navigator.clipboard.writeText(input.value);
};
</script>

<style scoped>
/* 可选样式 */
h1 {
  text-align: center;
}

.qrcode {
  display: flex;
}

input {
  display: block;
  margin: 10px auto;
  padding: 8px;
  width: 80%;
}

.po {
  display: flex;
  flex-direction: column;
}

.copy {
  text-align: center;
  width: 300px;
  margin-left: 30px;
}

.qrcode-container {
  display: flex;
  justify-content: center;
}
</style>